<template>
  <h3>{{ msg }}</h3>
  <div >{{ count }}</div>
  <button @click="onClick">++</button>
  <h1>我叫{{ obj.name }}</h1>
  <button @click="onChange">++</button>
  <div ref="dom">ref元素</div>
  <!-- 子子组件 -->
  <childs  :is="true"></childs>
  <ul>
    <li v-for="(item,index) in arr" :key="index">{{ item }}</li>
  </ul>
  <button @click="send" type="button">自定义组件传值</button>
</template>

<script setup lang='ts'>
//引入子子组件
import childs from './compontent/childs.vue';
//ref = shallowRef + triggerRef  isRef判断是否为Ref对象
import { ref,isRef,shallowRef,triggerRef } from 'vue'
import type {Ref} from 'vue'
const dom = ref<HTMLDivElement>()
// defineProps<{ msg: string }>()
//ts特有，可设置默认值
withDefaults(defineProps<{msg:string,arr:number[]}>(),{
  msg:"默认值",
  arr:()=>[10,20,30]
})
type name={
  name:string
}
const count: Ref<number> = ref(0)
const a = 2;
const obj: Ref<name> = shallowRef({
  name:'利好'
})
const onClick=()=>{
  count.value++
  alert(isRef(a))
  alert(isRef(count))       
  console.log(dom.value?.innerHTML);
  
}
//修改名稱
const onChange=()=>{
  obj.value.name = '劉俊'
  triggerRef(obj)
  console.log(obj);
  
}

//自定义事件传值 ts 写法
// const emit = defineEmits<{
//   //代表没有返回值
//   (e:'on-click',name:string):void //可多个
//   // (e:'on-click',name:string):void //可多个
//   // (e:'on-click',name:string):void //可多个
// }>()

const emits = defineEmits(['on-click'])
const send=()=>{
  emits('on-click','我传值是字符创类型')
}

//暴露值让父组件接受
// defineExpose({
//   name:'你好',
//   open:()=>{
//     console.log('打开open');
    
//   }
// })
</script>
<style scoped></style>        